{include file="public/header"}
<head>
    <meta charset="utf-8">
    <title>达人中心</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css" />
    <style media="screen">
        html body {
            margin: 0;
            background-color: #EEEEEE;
            width: 100%;
            height: 100%;
            font-size: 14px;
            color: #333333;
            font-weight: 500;
        }
        .flex-wrap{ display: -webkit-box;	display:box;display: -webkit-flex;	display: flex; }
        .flex-wrap2{  flex-wrap:wrap }
        .flex-con{  -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1;}
        .flex-vertical{  -webkit-box-horizontal: vertical;-webkit-flex-flow: column; flex-flow: column;}

        .color333 {
            font-size: 14px;
            color: #333; font-weight: normal;
        }

        .color {

        }

        .content {
            width: 1200px;
            margin: 30px auto;
            background-color: #fff;
            border-radius: 3px;
        }

        .base {
            width: 100%;
            height: 42px;
            line-height: 42px;
            text-align: center;
        }

        .base>div:first-child {
            float: left;
            width: 92px;
            height: 42px;
            border-top: 3px solid #0065F0;
            border-right: 1px solid #F4F4F4;
            box-sizing: border-box;
            position: relative;
            line-height: 40px;
            border-radius: 3px;
        }

        .base>div:nth-child(2) {
            float: right;
            width: 1108px;
            height: 42px;
            text-align: left;
            box-sizing: border-box;
            border-bottom: 1px solid #F4F4F4;

        }

        .ling {
            width: 92px;
            height: 100%;
            text-align: center;
            font-size: 14px;
            color: #999999;
            font-weight: normal;
            line-height: 40px;
            border-top: 3px solid #fff;
            box-sizing: border-box;
        }

        .info{
            height: 100%;
            margin-left:125px;
            margin-top: 57px;
        }
        .item{
            margin-bottom: 10px;
        }
        .item_left{
            width: 138px;

        }
        .img1{
            width: 100px;
            height: 100px;
            border-radius: 4px;
        }
        .color>div{
            width: 520px;
            border-radius: 3px;
            border: 1px solid #ccc;
            padding: 20px;
            font-size: 14px;
            color: #999;
            font-weight: normal;
        }
        .jianjie{
            margin-top: 16px;
        }

        .wrap1 {
            width: 100%;
            background: #3F3F3F;
            height: 30px;
            line-height: 30px;
        }

        .wrap1 .content1 {
            margin: 0 auto;
            width: 1200px;
            font-size: 12px;
            color: #ffffff;
            /*position: relative;*/
            display: flex;
        }

        .kong {
            flex: 1;
        }

        .content12 {
            position: relative;
        }

        .redhot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #BA0000;
            position: absolute;
            left: 24px;
            top: 5px;
        }

        .wrap2 {
            line-height: 60px;
            width: 100%;
            height: 60px;
            background: #ffffff;
        }

        .content2 {
            margin: auto;
            width: 1200px;
            display: flex;
        }

        .content2_left {
            width: 190px;
            font-size: 18px;
            color: #333333;
        }

        .content2_left span {
            display: inline-block;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #0065F0;
            vertical-align: middle;
            margin-right: 11px;
        }

        .content_middle {
            flex: 1;
            text-align: left;
            display: flex;
        }

        .content_right {
            font-size: 16px;
        }

        .content_right img {
            display: inline-block;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 20px;
            vertical-align: middle;
        }

        .content_middle .item {
            width: 152px;
        }

        .content_middle .item.active2 {
            color: #0065F0;
        }

        .wrap3 {
            line-height: 60px;
            width: 100%;
            height: 60px;
            background: #0065F0;
        }

        .content3 {
            margin: auto;
            width: 1200px;
            display: flex;
        }

        .content3-left {
            line-height: 60px;
            color: #ffffff;
            font-size: 16px;
        }

        .wrap5{
            margin: auto;
            padding: 20px 30px 88px 30px;
            background: #ffffff;
            width: 1200px;
            /*height: 740px;*/

            box-sizing: border-box;
            position: relative;
        }
        .page{
            position: absolute;
            height: 88px;
            right: 30px;
            bottom:0;
            display: inline-block;
            text-align: left;
            line-height: 88px;
            color: #999999;
            font-size:12px;
        }
        .page .page1{
            display: inline-block;

            width: 36px;
            height: 17px;
            height:17px;
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:17px;
            text-align: center;
            margin-right: 20px;
        }
        .page .page2{
            vertical-align: middle;
            display: inline-block;
            width:28px;
            height:28px;
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:28px;
            text-align: center;
            color: #999999;
            border-radius:2px;
            border:1px solid rgba(242,242,242,1);
        }
        .page .page3{
            vertical-align: middle;
            display: inline-block;
            width:auto;
            height:28px;
            margin: 0 10px;
            font-size:12px;
            color: #282828;
            line-height: 18px;
            text-align: center;

        }
        .page .page2.active{
            background:#0065F0;
            color: #FFFFFF;
            border-radius:2px;
            border:1px solid #0065F0;
        }
        .shenglve{

        }
        .
        label{
            display:inline-block;
            height:50px;
            line-height:50px;
            text-align:center;
            position: relative;
        }
        label input{
            width: 1px;
            height: 1px;
            vertical-align: bottom;
            opacity: 0;
        }
        .spot{
            display:inline-block;
            width:14px;
            height:14px;
            position: absolute;
            top:50%;
            transform: translate(0,-50%);
            transform:translate(0,-50%);
            -ms-transform: translate(0,-50%);
            -moz-transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
            -o-transform: translate(0,-50%);
            left:20px;
            z-index:5;
            border-radius: 50%;
            background:rgba(255,255,255,1);
            border:1px solid rgba(217,217,217,1);
        }
        .spot2{
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);

        }
        input:checked + .spot{
            background:url("__IMG__/radio.png") no-repeat;  /*选中后的样式图片*/
            background-size:14px;
            border:0px solid rgba(217,217,217,1);
        }
        .detailwrap{
            background: #ffffff;
            width: 1200px;
            margin: 30px auto 73px;
            padding: 50px 90px 100px 90px;
            box-sizing: border-box;
            position: relative;
        }
        .detailitem{
            display: inline-block;
            width:310px;
            height:513px;
            background:rgba(255,255,255,1);
            box-shadow:0px 2px 10px 0px rgba(0,0,0,0.1);
            border-radius:5px;
            /*border:1px solid rgba(238,238,238,1);*/
            border-top: 3px solid #0065F0;

        }
        .detailitem:nth-child(3n-1){
            margin-left: 27px;
            margin-right: 27px;

        }
        .detailitem{
            margin-bottom: 30px;

        }
        .detailitem .touxiangwrap{
            width: 100%;

        }
        .detailitem .touxiangwrap .touxiang{
            width:300px;
            height:300px;
            display: block;
            margin: 40px auto 15px;
        }
        .detailitem .touxiangwrap .texttitle{
            height:22px;
            font-size:16px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
            line-height:22px;
            text-align: center;
            width: 100%;
        }
        .detailitem div{
            cursor: pointer;
        }
        .detailcontent{
            padding:30px 30px 0px 30px;
        }
        .detailcontent2{overflow: hidden;height:40px;line-height:20px;
            padding-bottom:26px;
            border-bottom: 1px solid #EEEEEE;
        }
        .everycontent{
            display: inline-block;
            padding: 0 9px;
            line-height:20px;
            height:20px;
            border-radius:10px;
            border:1px solid rgba(102,102,102,1);
            margin-right: 10px;
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(102,102,102,1);
        }
        .everycontent:nth-child(4n){
            margin-right: 0;
        }
        .everycontent{
            margin-bottom: 14px;
        }
        .lianxi{
            height: 52px;
            line-height: 52px;
            text-align: center;
            color: #0065F0;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
        }

    </style>
</head>

<body>
<div class="wrap3">
    <div class="content3">
        <div class="content3-left">
            达人中心
        </div>
    </div>
</div>
<style>
    .box_1{
        width: 1200px;
        margin: 0 auto 0;
        height: 66px;
    }
    .box_1Name{
        color: #4A4A4A;
        width:60px;
        font-size:14px;
        font-weight:400;
        line-height:66px;
        padding-right: 5px;
    }
    .inputtttImg{
        width: 16px;
        height: 16px;
        margin-top:6px;
        margin-left:5px;
    }
    .inputttt{
        margin-top:19px;
        width:230px;
        height:28px;
        background:rgba(255,255,255,1);
        border-radius:3px;
        border:1px solid rgba(244,244,244,1);
        color:rgba(204,204,204,1);
        font-size:12px;
    }
    .inputrenwu {
        padding-left: 11px;
        box-sizing: border-box;
        display: inline-block !important;
        width: 200px !important;
        height: 28px !important;
        outline: none;
        border-width: 0;
    }
</style>
<form id="alls">
<div class="box_1 flex-wrap">
    <div class="box_1Name">达人名称</div>
    <div class="inputttt flex-wrap">
        <input type="text" class="inputrenwu" name="search[]" value="{$search.0?:''}" placeholder="搜索达人名称">
        <img src="__IMG__/search.png" class="inputtttImg"/>
    </div>
</div>
</form>
<!--弹窗-->
<style>
    .container_one{
        width:350px;
        height:190px;
        background:#fff;
        box-shadow:0px 2px 8px 0px rgba(0,0,0,0.2);
        border-radius:5px 4px 4px 4px;
        position: absolute;;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        z-index: 999;
    }
    .title{
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #CCC;
        font-size: 16px;
        font-weight: 600;
    }
    .title1{
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 17px;
        font-weight: 600;
        margin-top: 50px;
    }
    .title2{
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 17px;
        font-weight: 600;
    }
    .hidden{
        display: none;
    }
    .ovfHiden{overflow: hidden;height: 100%;}
</style>
<div class="container_one hidden">
    <!--<div class="title">联系达人<span style="padding-left: 200px;">关闭</span></div>-->
    <div class="title">
        <div style="float: left;width: 50%;text-align: right;">联系</div>
        <div style="float: left;text-align: left;">达人</div>
        <div class="guanbi" style="float: right;font-size: 13px;color: #FFF;padding-right: 5px;font-weight: normal;cursor: pointer;">关闭</div>
    </div>
    <div class="title1">联系电话</div>
    <div class="title2"></div>
</div>
<div class="all_div" style="display:none;width: 100%;height: 100%;background-color: gray;position: absolute;z-index: 100;opacity: 0.5;top: 0;left: 0;padding: 0;margin: 0;"></div>
<!--弹窗end-->
<div class="detailwrap flex-wrap2">
    {volist name="data" id="vo"}
    <div class="detailitem">
        <div class="touxiangwrap" onclick="location.href = '/shop/Man/manDetail?sup_id='+{$vo.sup_id};">
            <img src="{$vo['photo']}" class="touxiang" >
            <div class="texttitle">
                {$vo.sup_name}
            </div>
        </div>
        <div class="detailcontent" onclick="location.href = '/shop/Man/manDetail?sup_id='+{$vo.sup_id};">
            <div class="detailcontent2">
                {volist name="vo['goods']" id="vv"}
                    <span class="everycontent">
	  					{$vv}
	  				</span>
                {/volist}
            </div>
        </div>
        <div class="lianxi" data-id="{$vo.sup_phone}" style="margin-top: -6px">
            联系人
        </div>
    </div>
    {/volist}
    <div class="page flex-wrap">
        {$page}
    </div>
</div>
</body>

<script type="text/javascript" src="__JS__/common.js" ></script>
{include file="public/footer"}
<script type="text/javascript">
    $('.lianxi').click(function () {
        var phone = $(this).attr('data-id');
        $('.title2').text(phone);
        $('.all_div').css('display','block');
        $('html,body').addClass('ovfHiden');
        $('.container_one').removeClass('hidden');
    });
    $('.guanbi').click(function () {
        $('.all_div').css('display','none');
        $('html,body').removeClass('ovfHiden');
        $('.container_one').addClass('hidden');
    });
    /*筛选*/
    $(".inputtttImg").click(function () {
        var data = $("#alls").serialize();
        window.location.href = '/shop/Man/manPage?' + data;
    });
</script>


</html>
